<template>
  <div class="container">
    <navbar  title="我的粉丝" theme="light"></navbar>
    <div  class="filterbar" v-if="false">
      <text @click="selectType" :class="['filterbar-item', searchParam.type === 'DIRECT' && 'filterbar-item-current']" type="">全部粉丝({{memberNumStat.total}})</text>
      <text @click="selectType" :class="['filterbar-item', searchParam.type === 'DIRECT' && 'filterbar-item-current']" type="DIRECT">直接粉丝({{memberNumStat.direct}})</text>
    </div>
    <list
          class="member-list-container"
          @scroll="onPageScroll">
      <page-refresh v-on:refresh="onXRefresh" v-on:pullingDown="onPullingDown" :refreshing="refreshing"
                    :indicatorScale="indicatorScale"></page-refresh>
      <cell v-for="member in memberList" v-bind:key="member.userId">
        <div class="member">
          <div class="member-item">
            <image :src="member.avatarUrl || imgPlaceholder" class="member-item-pic"></image>
            <div class="member-item-detail">
              <div class="member-item-detail-row">
                <text class="member-item-nickname">{{member.nickname || member.phone}}</text>
                <wxc-tag v-if="member.level" type="solid"
                         :tag-color="userLevelTagColor(member.level)"
                         font-color="#ffffff"
                         :value="member.levelTitle"></wxc-tag>
              </div>
              <text class="member-item-phone">手机号码：{{member.phone}}</text>
              <text class="member-item-phone">加入时间：{{member.createTime}}</text>
            </div>
          </div>
        </div>
      </cell>
      <cell>
        <page-notice msg="抱歉，什么都木有找到～" v-if="!memberList.length  && !hasNext"></page-notice>
      </cell>
      <page-loading-more v-on:loadingMore="onLoadingMore" :loadingMore="loadingMore"
                         :shown="hasNext"></page-loading-more>
    </list>
    <page-scrolltop :shown="pageScrollTopShown" @click="gotoTop"></page-scrolltop>
  </div>
</template>
<style lang="scss">
  @import "./sass/var";
  @import "./sass/mixin";
  @import "./sass/utilities";
  @import "./sass/icon";
  .container{
    background-color: $body-bg;
    transition: transform .3s linear
  }
  .filterbar {
    flex-direction: row;
    justify-content: space-between;
    &-item {
      flex: 1;
      background-color: #ffffff;
      height: 80px;
      line-height: 80px;
      color: $color;
      font-size: 28px;
      text-align: center;
      @include border-bottom(1px, solid, #ddd);
      &-current {
        color: $color-primary;
        @include border-bottom(2px, solid, $brand-primary);
      }
    }
  }
  .member {
    background-color: #ffffff;
    padding: 30px 30px 20px 30px;
    @include border-bottom(1px, solid, #ddd);
    &-item {
      flex-direction: row;
      &-pic {
        width: 126px;
        height: 126px;
        @include border(1px, solid, #ddd);
        border-radius: 5px;
      }
      &-detail {
        flex: 1;
        padding-left: 20px;
        justify-content: space-between;
        height: 126px;
        &-row {
          justify-content: space-between;
          flex-direction: row;
          align-items: center;
        }
      }
      &-nickname {
        font-size: 32px;
        line-height: 36px;
        color: $color;
        margin-bottom: 5px;
      }
      &-phone {
        font-size: 24px;
        color: $color-muted;
        margin-bottom: 5px;
      }
    }
    &-create-time {
      color: $color-muted;
      font-size: 24px;
    }
    &-footer {
    }
  }
  .member-commission {
    flex-direction: row;
    justify-content: center;
    padding: 20px 0 10px 0;
    &-cell {
      flex: 1;
    }
    &-title {
      color: $color-muted;
      font-size: 24px;
    }
    &-text {
      padding: 10px 5px;
    }
  }
</style>
<script>

import { WxcTag, WxcRichText } from 'weex-ui'
let api = require('./include/api')
let Deferred = require('Deferred')
let urlPath = require('./include/url-path')
require('./include/page-xdom')
let theme = require('./include/theme')
const DEFAULT_SEARCH_PARAM = {
  page: 1,
  type: 'DIRECT'
}
module.exports = {
  mixins: [
    require('./mixin/page-loading'),
    require('./mixin/page-refresh'),
    require('./mixin/page-loading-more'),
    require('./mixin/page-scrolltop')
  ],
  components: {
    'page-notice': require('./components/page-notice.vue'),
    'navbar': require('./components/navbar.vue'),
    WxcTag,
    WxcRichText
  },
  data () {
    return {
      memberList: [],
      refreshing: false,
      refreshIndicatorScale: 0.2,
      hasNext: true,
      searchParam: Object.assign({}, DEFAULT_SEARCH_PARAM),
      loading: false,
      memberNumStat: {},
      imgPlaceholder: urlPath.assets('images/img_placeholder.png?v=1')
    }
  },
  created () {
    Deferred.when(this.loadData(), this.search()).always(() => {
      this.loaded = true
    })
  },
  methods: {
    loadData () {
      return api.page.team.data().done(rs => {
        this.memberNumStat = rs.data.memberNumStat
      })
    },
    resetSearchParam () {
      Object.assign(this.searchParam, DEFAULT_SEARCH_PARAM)
      this.hasNext = true
    },
    selectType (e) {
      this.resetSearchParam()
      this.searchParam.type = e.target.attr.type
      this.search()
    },
    userLevelTagColor (level) {
      switch (level) {
        case 'ORDINARY': return '#bebebe'
        case 'PLUS': return theme.brand.success
        case 'CARRIER': return theme.brand.warning
        case 'CHIEF': return theme.brand.primary
      }
    },
    search (append, callback) {
      // if(this.loading) {
      //   return new Deferred().resolve()
      // }
      this.loading = true
      return api.team.memberList(this.searchParam).done((rs) => {
        if (append) {
          this.memberList = this.memberList.concat(rs.data.results)
        } else {
          this.memberList = rs.data.results
        }
        let paging = rs.data
        this.hasNext = paging.hasNext
      }).always(() => {
        this.loading = false
        callback && callback()
      })
    },
    onXRefresh (event) {
      this.searchParam.page = 1
      this.onRefresh(event, Deferred.when(this.loadData(), this.search()))
    },
    onLoadingMore (event) {
      this.loadingMore = true
      this.searchParam.page = this.searchParam.page + 1
      this.search(true, () => {
        this.loadingMore = false
      })
    },
    gotoTop () {
      let dom = weex.requireModule('dom')
      dom.scrollToElement(this.$refs.memberList)
    },
    onPageScroll (event) {
      this.onPageScrollForScrollTop(event)
    },
    itemClick (item) {
      // navigator.push('commission-item.js?id=' + item.id)
    }
  }
}
</script>
